---
import { Image } from "astro:assets";
import androidIcon from "../assets/platform/android.svg";
import iosIcon from "../assets/platform/ios.svg";
import linuxIcon from "../assets/platform/linux.svg";
import macosIcon from "../assets/platform/macos.svg";
import webIcon from "../assets/platform/web.svg";
import windowsIcon from "../assets/platform/windows.svg";

type App = {
  slug: string;
  name: string;
  description?: string;
  website?: string;
  repository?: string;
  icon?: string;
  platforms?: string[];
};

const getApps = async (): Promise<App[]> => {
  const response = await fetch(
    "https://raw.githubusercontent.com/leanflutter/flutter_apps/main/index.json"
  );
  return (await response.json()) as App[];
};

const getPlatformIcon = (platform: string) => {
  switch (platform) {
    case "android":
      return androidIcon;
    case "ios":
      return iosIcon;
    case "linux":
      return linuxIcon;
    case "macos":
      return macosIcon;
    case "web":
      return webIcon;
    case "windows":
      return windowsIcon;
  }
};

const apps = await getApps();
---

<div>
  {
    apps.map(async (app) => (
      <div class="flex flex-row">
        <div class="inline-flex w-20 h-20">
          <img class="block w-20 h-20 bg-gray-50 rounded-2xl" src={app.icon} />
        </div>
        <div class="flex-1 ml-4 !mt-0">
          <a href={app.website ?? app.repository}>
            <div class="font-semibold">{app.name}</div>
          </a>
          <Fragment set:html={app.description} />
          {(app.platforms?.length || 0) > 0 && (
            <div class="flex flex-row gap-1 items-center">
              {app.platforms?.map((platform) => (
                <Image
                  class="!mt-0 w-4 h-4"
                  src={getPlatformIcon(platform)!}
                  width="16"
                  height="16"
                  alt={platform}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    ))
  }
</div>
